<template>
  <!-- 详情页轮播图 -->
  <div class="swiper"
       :class="name">
    <div class="swiper-wrapper">
      <slot></slot>

    </div>

    <!-- <div class="swiper-pagination"></div> -->
    <!-- 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
  </div>

</template>
<script>
// import Swiper from 'swiper'       //把swiper所有模块都导入进来
// import 'swiper/swiper-bundle.css'
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper'


// import styles bundle
import 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css';

export default {
  props: {
    slidesPerView: {
      type: Number,
      default: 3
    },
    name: {
      type: String,
      default: 'swiper'
    }
  },
  mounted () {
    Swiper.use([Navigation, Pagination, Autoplay]);
    var mySwiper = new Swiper('.' + this.name, {
      slidesPerView: this.slidesPerView,
      spaceBetween: 15,
      freeMode: true,
      //direction: 'vertical', // 垂直切换选项
      speed: 1000,
      // Cannot read properties of undefined (reading 'parentNode')   出现这个就把loop注释掉
      // loop: true, // 循环模式选项
      // autoplay: this.autoplay,
      // 如果需要分页器
      // pagination: {
      //   el: '.swiper-pagination',
      // },

      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
    })

  },
}
</script>
<style scoped>
.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 0.6);
}
</style>